<template>
  <!-- 定义一个容器用于显示网络拓扑图 -->

  <!-- 展示组件的容器 -->
  <div v-if="showDetail" style="position: relative; top: 0; left: 0; width: 100%; height: 100%;">
    <el-icon class="return-icon" @click="showOriginalTopology">
      <Back />
    </el-icon>
    <component :is="currentComponent" :name="selectedNodeName" ref="detailComponent"></component>
  </div>
  <div v-else id="network-topology" style="width: 100%; height: 100%;"></div>

</template>

<script>
import * as echarts from 'echarts';
import GraphNode from '@/components/echarts/node/Graph.vue';

export default {
  name: 'NetworkTopology',
  components: {
    GraphNode,
  },
  data() {
    return {
      myChart: null,
      showDetail: false, // 控制是否展示详情
      selectedNodeName: '', // 存储点击的节点名称
      currentComponent: null,
      option: {
        initChart: {
          series: [
          {
            type: 'graph',
            layout: 'none',
            data: [
              { name: 'UDR', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'NRF', x: 100, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'PCF', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'NSSF', x: 300, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'AUSF', x: 0, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'AMF', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'SMF', x: 200, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'NWDAF', x: 300, y: 50, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [50, 60] },
              { name: 'DCCF', x: 400, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'ADRF', x: 400, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'UPF-0', x: 150, y: 90, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'UPF-1', x: 150, y: 150, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60]},
              { name: 'UPF-2', x: 250, y: 90, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'UPF-3', x: 250, y: 150, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: '网元结点', x: 100, y: 200, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [40, 40] },
              { name: '联邦客户端', x: 180, y: 200, symbol: 'image://' + require('@/assets/icon/leaf.png'), symbolSize: [40, 40] },
              { name: '中心服务器', x: 270, y: 200, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [40, 40] },
              { name: 'UPF中心点', x: 200, y: 120, symbol: 'none', symbolSize: [40, 40], label: { show: false } },
            ],
            links: [
              { source: 'UDR', target: 'AUSF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'NRF', target: 'AMF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'PCF', target: 'SMF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'NSSF', target: 'NWDAF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'DCCF', target: 'ADRF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'UPF-0', target: 'UPF-1', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'UPF-2', target: 'UPF-3', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'SMF', target: 'UPF中心点', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
            ], // 初始化为空
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: 'white',
              fontSize: 18,
            },
            lineStyle: {
              curveness: 0,
              width: 2,
              color: 'white',
              opacity: 1
            },
            markLine: {
              data: [
                [
                  { coord: [-50, 25] },  // 水平线起点
                  { coord: [450, 25] } // 水平线终点
                ],
                [
                  { coord: [100, 120] },  // 水平线起点
                  { coord: [300, 120] } // 水平线终点
                ],
              ],
              name: 'bus',
              lineStyle: {
                type: 'solid',
                color: 'white',
                width: 2
              },
              symbol: 'none',
              tooltip: {
                show: true,
                formatter: 'bus line'
              }
            }
          }
        ],
        },
        deployChart: {
          series: [
          {
            type: 'graph',
            layout: 'none',
            data: [
              { name: 'UDR', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'NRF', x: 100, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'PCF', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'NSSF', x: 300, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'AUSF', x: 0, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'AMF', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'SMF', x: 200, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'NWDAF', x: 300, y: 50, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [50, 60] },
              { name: 'DCCF', x: 400, y: 0, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'ADRF', x: 400, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [50, 60] },
              { name: 'UPF-0', x: 150, y: 90, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [70, 60] },
              { name: 'UPF-1', x: 150, y: 150, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [70, 60]},
              { name: 'UPF-2', x: 250, y: 90, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [70, 60] },
              { name: 'UPF-3', x: 250, y: 150, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [70, 60] },
              { name: '网元结点', x: 100, y: 200, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [40, 40] },
              { name: '联邦客户端', x: 180, y: 200, symbol: 'image://' + require('@/assets/icon/leaf.png'), symbolSize: [40, 40] },
              { name: '中心服务器', x: 270, y: 200, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [40, 40] },
              { name: 'UPF中心点', x: 200, y: 120, symbol: 'none', symbolSize: [40, 40], label: { show: false } },
            ],
            links: [
            { source: 'UDR', target: 'AUSF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'NRF', target: 'AMF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'PCF', target: 'SMF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'NSSF', target: 'NWDAF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'DCCF', target: 'ADRF', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'UPF-0', target: 'UPF-1', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'UPF-2', target: 'UPF-3', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: 'SMF', target: 'UPF中心点', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
            ], // 初始化为空
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: 'white',
              fontSize: 18,
            },
            lineStyle: {
              curveness: 0,
              width: 2,
              color: 'white',
              opacity: 1
            },
            markLine: {
              data: [
                [
                  { coord: [-50, 25] },  // 水平线起点
                  { coord: [450, 25] } // 水平线终点
                ],
                [
                  { coord: [100, 120] },  // 水平线起点
                  { coord: [300, 120] } // 水平线终点
                ],
              ],
              name: 'bus',
              lineStyle: {
                type: 'solid',
                color: 'white',
                width: 2
              },
              symbol: 'none',
              tooltip: {
                show: true,
                formatter: 'bus line'
              }
            }
          }
        ],
        }
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const container = document.getElementById('network-topology');
      if (container) {
        this.myChart = echarts.init(container);
        this.$nextTick(() => {
          this.myChart.setOption(this.option.initChart);
          this.myChart.on('click', this.handleNodeClick);
        })
      }
 
    },
    deployChart() {
      if (this.myChart) {
        this.myChart.setOption(this.option.deployChart);
      } else {
        this.initChart();
        this.myChart.setOption(this.option.deployChart);
      }
    },
    handleNodeClick(params) {
      this.selectedNodeName = params.name.toLowerCase(); // 更新点击的节点名称
      const componentMap = {
        'AMF': "GraphNode",
        'AUSF': "GraphNode",
        'NRF': "GraphNode",
        'NSSF': "GraphNode",
        'PCF': "GraphNode",
        'SMF': "GraphNode",
        'UDM': "GraphNode",
        'UDR': "GraphNode",
        'UPF-0': "GraphNode",
        'UPF-1': "GraphNode",
        'UPF-2': "GraphNode",
        'UPF-3': "GraphNode",
      };
      const componentName = componentMap[params.name];
      if (componentName) {
        this.currentComponent = componentName;
        this.showDetail = true;
      }
    },
    showOriginalTopology() {
      this.showDetail = false; // 隐藏详情，展示原始拓扑图
      this.currentComponent = null;
      this.selectedNodeName = ''; // 重置点击的节点名称
      this.clearIntervalInComponent(); // 清除子组件中的定时器
      if (this.myChart) {
        this.myChart.dispose();
      }
      // 重新初始化图表
      this.$nextTick(() => {
        this.initChart();
      });

      // 如果子组件存在且有销毁图像的方法，调用销毁方法
      const detailComponent = this.$refs.detailComponent;
      if (detailComponent && detailComponent.destroyChart) {
        detailComponent.destroyChart(); // 调用子组件的销毁方法
      }
    },
    clearIntervalInComponent() {
      if (this.$refs.detailComponent && this.$refs.detailComponent.intervalId) {
        clearInterval(this.$refs.detailComponent.intervalId);
      }
    },
  }
};
</script>

<style scoped>
/* 设置容器的宽度和高度 */
#network-topology {
  position: relative;
  width: 100%;
  height: 100%;
}

.return-icon {
  position: absolute;
  left: 10px;
  top: -30px;
  background-color: transparent;
  color: cyan;
  font-size: 40px;
  cursor: pointer;
  outline: none;
  z-index: 1;
}

.return-icon::after {
  content: '首页';
  /* 这是要显示的文字 */
  position: absolute;
  left: 100%;
  /* 将文字放置在图标的右侧 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直居中对齐 */
  white-space: nowrap;
  /* 防止文字换行 */
  background-color: transparent;
  /* 背景颜色 */
  color: cyan;
  /* 文字颜色 */
  padding: 2px 4px;
  /* 内边距 */
  border-radius: 4px;
  /* 圆角 */
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s;
  /* 过渡效果 */
  pointer-events: none;
  /* 防止伪元素影响点击事件 */
  font-size: 24px;
  font-weight: bold;
}

.return-icon:hover::after {
  opacity: 1;
  /* 鼠标悬停时显示 */
  pointer-events: auto;
  /* 鼠标悬停时允许点击 */
}
</style>
